<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单基础信息</span>
      </div>
      <div>
        <el-descriptions title="" direction="vertical" :column="3" border>
          <el-descriptions-item :span="1" label="订单编号">{{
            baseOrder.sn
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="支付方式">
            <el-tag>{{ baseOrder.payChannel }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1" v-if="couponInfo != 1" label="券名称">
            {{ couponInfo.couponName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" v-if="couponInfo != 1" label="卡号">
            {{ couponInfo.couponCard }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" v-if="couponInfo != 1" label="券码">
            {{ couponInfo.couponCode }}
          </el-descriptions-item>
          <el-descriptions-item
            :span="1"
            v-if="couponInfo != 1"
            label="券码金额"
            >{{ baseOrder.couponPrice }}</el-descriptions-item
          >
          <el-descriptions-item :span="1" label="支付金额">{{
            baseOrder.moneyAmount
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="支付积分">{{
            baseOrder.jifenAmount
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="补贴金额">{{
            baseOrder.bankAbcGiveMoney
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="支付时间">{{
            baseOrder.payTime
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="订单状态">
            <el-tag type="warning" v-if="baseOrder.status == 0">已取消</el-tag>
            <el-tag type="danger" v-else-if="baseOrder.status == 1"
              >待支付</el-tag
            >
            <el-tag v-else-if="baseOrder.status == 2">已支付</el-tag>
            <el-tag type="success" v-else-if="baseOrder.status == 3"
              >已发货</el-tag
            >
            <el-tag type="success" v-else-if="baseOrder.status == 4"
              >确认收货</el-tag
            >
            <el-tag type="success" v-else-if="baseOrder.status == 5"
              >申请退款</el-tag
            >
            <el-tag type="warning" v-else-if="baseOrder.status == 6"
              >退款完成</el-tag
            >
            <el-tag type="danger" v-else-if="baseOrder.status == 7"
              >已评价</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="收货时间">
            {{ baseOrder.receiveShippingTime }}</el-descriptions-item
          >

          <el-descriptions-item :span="1" label="取件方式">
            <el-tag v-if="baseOrder.pickUpWay == 0">快递邮寄</el-tag>
            <el-tag type="success" v-else-if="baseOrder.pickUpWay == 1"
              >门店自取</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="邮费">{{
            baseOrder.postageAmount == null ? 0 : baseOrder.postageAmount
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="预约取件时间">{{
            baseOrder.schedulePickupTime
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="备注">{{
            baseOrder.remark
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单商品信息</span>
      </div>
      <div
        v-for="item in orderGoods"
        :key="item.id"
        style="margin-bottom: 12px; border-bottom: 1px solid #e6ebf5"
      >
        <el-descriptions title="">
          <el-descriptions-item :span="2" label="商品名称">{{
            item.productInfo.product_name
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="商品分类">{{
            `${item.productInfo.one_category}/${item.productInfo.two_category}/${item.productInfo.three_category}`
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="供应商">
            <el-tag type="" effect="dark">
              {{
                item.productInfo.goods_supplier == null
                  ? item.productInfo.local_supplier
                  : item.productInfo.goods_supplier
              }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="商品规格">
            {{ item.skuMsg }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="购买数量">
            {{ item.buyNum }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="规格价">
            {{ item.skuPrice }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="商品主图">
            <el-image
              :src="item.productInfo.preview_img"
              style="width: 100px"
              fit="fills"
            ></el-image>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单开票信息</span>
      </div>
      <div v-if="orderInvoice">
        <el-descriptions title="">
          <el-descriptions-item :span="2" label="发票名称">{{
            orderInvoice.invoiceName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="税号">{{
            orderInvoice.invoiceTaxId
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="地址">{{
            orderInvoice.address
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="电话">{{
            orderInvoice.mobile
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="结算周期">
            T+{{ orderInvoice.settlementCycle }}天
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="最晚到货时间">
            {{ orderInvoice.deliveryTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>暂无开票信息</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单客户信息</span>
      </div>
      <div v-if="orderCustomer">
        <el-descriptions title="">
          <el-descriptions-item :span="2" label="客户姓名">{{
            orderCustomer.customerName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="客户手机号">{{
            orderCustomer.customerMobile
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="所属银行">{{
            orderCustomer.bankName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="银行简称">{{
            orderCustomer.bankShortName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="所属部门">
            {{ orderCustomer.divisionName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>暂无客户信息</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单收货地址信息</span>
      </div>
      <div>
        <el-descriptions title="" v-if="orderAddresses.addressInfo">
          <el-descriptions-item :span="2" label="收货人姓名">{{
            orderAddresses.addressInfo.recipient
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="收货人手机号码">{{
            orderAddresses.addressInfo.phone_number
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="收货地址">
            {{ orderAddresses.addressInfo.address }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="详细地址">
            {{ orderAddresses.addressInfo.extra_field1 }}
          </el-descriptions-item>
        </el-descriptions>
        <div v-else>暂无收货地址信息</div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>自提门店信息</span>
      </div>
      <div>
        <el-descriptions title="" v-if="pickUpStore">
          <el-descriptions-item :span="2" label="门店名称">{{
            pickUpStore.storeName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="门店地址">{{
            pickUpStore.storeSite
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="联系人">{{
            pickUpStore.storeUserName
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="联系电话">
            {{ pickUpStore.storeMobile }}
          </el-descriptions-item>
        </el-descriptions>
        <div v-else>暂无信息</div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单发货信息</span>
      </div>
      <div v-if="orderSends">
        <el-descriptions title="">
          <el-descriptions-item :span="2" label="物流公司">{{
            orderSends.company
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="物流公司编号">{{
            orderSends.companyCode
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="快递单号">
            {{ orderSends.logisticsNumber }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="发货时间">
            {{ orderSends.createdTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else>暂未发货</div>
    </el-card>
  </div>
</template>
<script>
import { showOrderDetail } from "@/api/system/order.js";
export default {
  name: "OrderDetail",
  data() {
    return {
      baseOrder: {},
      orderAddresses: {},
      orderGoods: [],
      orderSends: {},
      couponInfo: {},
      orderInvoice: {}, //开票信息
      orderCustomer: {}, //客户信息
      pickUpStore: {}, //自提门店信息
    };
  },
  props: {
    orderId: Number,
  },
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      showOrderDetail({ orderId: this.orderId }).then((res) => {
        console.log(res);
        this.baseOrder = res.data.baseOrder;
        this.orderInvoice = res.data.orderInvoice;
        this.orderCustomer = res.data.orderCustomer;
        this.couponInfo = res.data.couponInfo;
        this.pickUpStore = res.data.pickUpStore;
        res.data.orderAddresses.addressInfo = JSON.parse(
          res.data.orderAddresses.addressInfo
        );
        this.orderAddresses = res.data.orderAddresses || {};
        if (res.data.orderGoods != null) {
          this.orderGoods = res.data.orderGoods.map((v) => {
            const { mallProductInfo, productInfo, ...reset } = v;
            v = {
              ...reset,
              mallProductInfo: JSON.parse(mallProductInfo),
              productInfo: JSON.parse(productInfo),
            };
            return v;
          });
          // const { mallProductInfo, productInfo, ...reset } =
          //   res.data.orderGoods;
          // this.orderGoods = {
          //   reset,
          //   mallProductInfo: JSON.parse(mallProductInfo),
          //   productInfo: JSON.parse(productInfo),
          // };
        } else {
          this.orderGoods = res.data.orderGoods;
        }

        this.orderSends = res.data.orderSends;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 600px;
  overflow: auto;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>
